 <template>
  <div class="selects">
    <div class="selectTables">
      <el-popover placement="bottom-end" width="500px" trigger="focus">
        <el-input
          placeholder="选择项目名称"
          slot="reference"
          v-model="selectParams.keyword"
          @input="getServiceItem()"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="项目" name="first">
            <el-table
              v-loading="selectParams.zhengliaoLogding"
              @current-change="xuanzeData"
              highlight-current-row
              :data="selectParams.zhengliaoList"
              style="width: 100%"
              height="300"
            >
              <el-table-column label="序号" prop="id" width="50">
              </el-table-column>
              <el-table-column label="项目名称" prop="name" width="200">
              </el-table-column>

              <el-table-column label="价格" prop="price" width="50">
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page="selectParams.page"
              :page-size="selectParams.limit"
              @current-change="handlePagination"
              :total="selectParams.pageCount"
              layout="prev, pager, next"
            >
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="组合项目" name="second">
            <el-table
              v-loading="combinationSelectParams.Logding"
            
              highlight-current-row
              :data="combinationSelectParams.data"
              style="width: 100%"
              height="300"
            >
              <el-table-column label="序号" prop="id" width="50">
              </el-table-column>
              <el-table-column label="标题" prop="title" width="200">
              </el-table-column>

              <el-table-column label="备注" prop="remark" width="50">
              </el-table-column>
               <el-table-column
                
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <!--  @click="handleClick(scope.row)" -->
                  <el-button  @click="combinationClick(scope.row)" type="text" size="small">添加</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-popover>
    </div>
  </div>
</template>
<script>
export default {
  props: ["thatF"],
  data() {
    return {
      activeName:'first',
      selectParams: {
        keyword: "",
        page: 1,
        limit: 15,
        pageCount: 0,
        zhengliaoLogding: false,
        zhengliaoList: [],
      },
      //组合项目数据
      combinationSelectParams:{
        data:[],
        Logding:false,
      },
    };
  },
  mounted() {
    this.getServiceItem();
  },
  methods: {
    handlePagination(e) {
      this.selectParams.zhengliaoLogding = true;
      this.selectParams.page = e;

      this.getServiceItem();
    },
  
    handleClick(tab, event){
      console.log(tab.paneName)
      if(tab.paneName=='second'){
        this.getServiceGroup()
      }
    },
    //诊疗列表
    getServiceItem() {
      let d = {
        keyword: this.selectParams.keyword,
        page: this.selectParams.page,
        limit: this.selectParams.limit,
      };
      this.selectParams.zhengliaoLogding = true;
      this["_API"].getClinic_doctorgetServiceItem(d).then((res) => {
        this.selectParams.zhengliaoList = res.data.list;
        this.selectParams.pageCount = res.data.count;
        this.selectParams.zhengliaoLogding = false;
      });
    },
      //组合项目
    getServiceGroup() {
      let d = {
 
      };
       this.combinationSelectParams.Logding = true;
      this["_API"].getservice_feegetServiceGroup(d).then((res) => {
        console.log("res",res)
        if(res.code==200){
         this.combinationSelectParams.data=res.data
        }
        this.combinationSelectParams.Logding = false;
      });
    },
      xuanzeData(item) {
      if (this.thatF.zlListSub.findIndex((res) => res.id == item.id) === -1) {
        item.once=1;
        this.thatF.zlListSub = this.thatF.zlListSub.concat(item);
      }else{
         this.$message({
          message: '此项目已经添加过了',
          type: 'warning'
         });
      }

      console.log(" this.thatF.zlListSub", this.thatF.zlListSub);
    },
    combinationClick(e){
      console.log(" e.extra_json", e)
      e.extra_json.forEach(v => {
          
         
          if(this.thatF.zlListSub.findIndex(v2=>v2.id==v.id)===-1){
             v.once=1;
             v.union_name=e.title
           
            this.thatF.zlListSub = this.thatF.zlListSub.concat([v]);
          }
      });
      
       // 
   
      
    },
  },
};
</script>